<template>
  <div class="attention-wrap">
    <div class="attention-content">
      <div class="attention-list" v-if="expertList.length > 0">
        <div
          class="attention-card"
          v-for="(item, index) in expertList"
          :key="index"
        >
        <Avatar shape="circle" icon="ios-person" size="40" :src='item.face'/>
          <!-- <div v-if="!item.face" class="head-face">
            <img src="../../../assets/images/default_avatar.png" alt="" />
          </div>
          <div
            class="head-face"
            v-else
            :style="`background-image:url(${item.face})`"
          ></div> -->

          <div class="attention-info">
            <p class="name">{{ item.name }}</p>
            <p class="addr">{{ item.region }}</p>
            <p class="describe">
              {{ item.domain }}
            </p>
            <div class="other">
              <span
                >在线问诊
                <span class="price"
                  >¥ {{ item.consultPrice || "暂无" }}</span
                ></span
              >
              <span
                >线下预约
                <span class="price"
                  >¥ {{ item.registerPrice || "暂无" }}</span
                ></span
              >
              <div class="score">
                <img
                  src="@/assets/online_consulting/score.png"
                  alt=""
                  class="score-face"
                />
                <span>{{ item.scoreAvg }}</span>
              </div>
            </div>
          </div>

          <div class="attention-btn" @click="handleCancle(item)">✔ 已关注</div>
        </div>
      </div>
      <empty v-else />
      <div class="page" v-if="expertList.length > 0">
        <Page
          :total="total"
          @on-change="currentHandle"
          :page-size="params.pageSize"
        />
      </div>
    </div>
    <!-- <Footer :top="20"></Footer> -->
  </div>
</template>
<script>
import Footer from "@/components/footer/my_footer.vue";
import { getExpertsList, cancleAttention } from "@/api/myAttention";
export default {
  components: {
    Footer,
  },
  data() {
    return {
      current: 0,

      params: {
        order: "desc",
        pageNumber: 1,
        type: 0, // 0：专家，1：用户
        pageSize: 5,
      },
      expertList: [],
      total: 0,
    };
  },

  mounted() {
    this.getExpertList();
  },
  methods: {
    //取消关注
    handleCancle(item) {
      this.$Modal.confirm({
        title: "确认取消?",
        content: "确认取消关注此信息?",
        loading: true,
        onOk: () => {
          let parms = {
            dataIds: item.relationId,
            type: 0, // 专家
          };
          cancleAttention(parms).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("已成功取消关注");
              this.$emit("userInfo");
              this.getExpertList();
            }
          });
        },
      });
    },
    //获取当前页码
    currentHandle(current) {
      this.params.pageNumber = current;
      this.getExpertList();
    },
    //获取专家列表
    getExpertList() {
console.log('🚀🚀',this.params,'this.params');
      getExpertsList(this.params).then((res) => {
        const {
          code,
          result: { total, records },
        } = res;
        if (code == 200) {
          this.total = parseInt(total);
          this.expertList = records.map((item) => {
            if (item.scoreAvg != null) {
              item.scoreAvg = item.scoreAvg.toFixed(1);
            } else {
              item.scoreAvg = "0.0";
            }
            return item;
          });
          // this.expertList = records || [];
        }
      });
    },
    //排序工具
    // compare(property) {
    //   return function (a, b) {
    //     var value1 = a[property];
    //     var value2 = b[property];
    //     return value1 - value2;
    //   };
    // },
  },
};
</script>
<style lang="scss" scoped>
.attention-wrap {
  //   min-height: calc(100vh - (200 / 1920 * 100vw));
  .attention-content {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: calc(5 / 1920 * 100vw);
    height: calc(900 / 1920 * 100vw);

    .attention-list {
      .attention-card {
        display: flex;
        align-items: center;
        border-radius: calc(5 / 1920 * 100vw);
        padding: 19px 0;
        border-bottom: 1px solid #f0f0f0;
        .head-face {
          width: calc(110 / 1920 * 100vw);
          height: calc(110 / 1920 * 100vw);
          border-radius: calc(4 / 1920 * 100vw);
          background-size: cover;
        }
        .attention-info {
          width: calc(700 / 1920 * 100vw);
          margin-left: calc(20 / 1920 * 100vw);
          line-height: calc(28 / 1920 * 100vw);
          flex: 1;
          .name {
            display: flex;
            align-items: center;
            font-size: calc(18 / 1920 * 100vw);
            color: #333333;
          }
          .addr {
            font-size: calc(14 / 1920 * 100vw);
          }
          .score {
            margin-left: calc(8 / 1920 * 100vw);
            .score-face {
              width: calc(12 / 1920 * 100vw);
              height: calc(13 / 1920 * 100vw);
            }
            > span {
              font-size: calc(14 / 1920 * 100vw);
              margin-left: calc(4 / 1920 * 100vw);
            }
          }
          .describe {
            color: #9a9a9a;
            font-size: calc(14 / 1920 * 100vw);
            text-overflow: -o-ellipsis-lastline !important;
            overflow: hidden !important; //溢出内容隐藏
            text-overflow: ellipsis !important; //文本溢出部分用省略号表示
            display: -webkit-box !important; //特别显示模式
            -webkit-line-clamp: 2 !important; //行数
            line-clamp: 2 !important;
            -webkit-box-orient: vertical !important; //盒子中内容竖直排列
          }
        }
        .other {
          display: flex;
          align-items: center;
          color: #9a9a9a;
          > span {
            font-size: calc(14 / 1920 * 100vw);
            margin-right: 16px;
          }
          .price {
            color: #fd5151;
          }
        }
        .attention-btn {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 84px;
          height: 34px;
          background: #fd5151;
          color: #fff;
          font-size: 14px;
          border-radius: 4px;
          cursor: pointer;
        }
      }
    }
    .page {
      position: absolute;
      right: calc(40 / 1920 * 100vw);
      bottom: calc(24 / 1920 * 100vw);
    }
  }
}
</style>
